import informationPosition from "@/components/InformationPosition/information-position.vue";
import { createApp, h } from "vue";
function MeasureAttr({ map, overlayLimit = 1 }) {
  const ins = MeasureAttr.getIns();
  if (ins) {
    return ins
  }
  this.map = map;
  this.listener = null;
  this.overlayLimit = overlayLimit;
  this.overlaysArr = [];
  this.init();
  MeasureAttr.ins = this;
}
MeasureAttr.getIns = function () {
  return MeasureAttr.ins;
}
MeasureAttr.create = function ({ map, overlayLimit }) {
  return new MeasureAttr({ map, overlayLimit })
}
// 初始化
MeasureAttr.prototype.init = function () {
  if (!ol) { return }
  if (!this.map) { return }
  // 初始化绑定事件
  this.bindEvt();
}
// 绑定事件
MeasureAttr.prototype.bindEvt = function () {
  this.map.getViewport().style.cursor = 'pointer';
  this.listener = this.map.on('click', (e) => {
    this.putOverlay(e)
  })
}
// 初始化overlay
MeasureAttr.prototype.putOverlay = function (e) {
  if (this.overlaysArr.length >= this.overlayLimit) {
    const head = this.overlaysArr[0];
    this.map.removeOverlay(head.overlay);
    this.overlaysArr.shift();
  }
  const coordinate = e.coordinate;
  if (!coordinate) { return }
  const [longitude, latitude] = coordinate;
  const coordinate_ = ol.proj.transform([longitude, latitude], 'EPSG:3857', 'EPSG:4326')
  // ol.proj.transform(start, 'EPSG:3857', 'EPSG:4326')
  console.log(coordinate_)
  const [longitude_, latitude_] = coordinate_;
  if (!longitude || !latitude) { return }
  const unid = new Date().getTime()
  const attrIns = this;
  const app = createApp({
    render() {
      return h(informationPosition, {
        mainTitle: '坐标',
        longitude: longitude_,
        latitude: latitude_,
        unid,
        onClose: (e) => {
          const { unid } = e;
          const currentOverlay = attrIns.map.getOverlayById(unid);
          for (let i = 0; i < attrIns.overlaysArr.length; i++) {
            const item = attrIns.overlaysArr[i];
            if (item.id === unid) {
              item.app.unmount();
              attrIns.overlaysArr.splice(i, 1);
              break;
            }
          }
          if (currentOverlay) {
            attrIns.map.removeOverlay(currentOverlay)
          }
        }
      })
    }
  })
  // 暂时不用
  // app.onUnmount()
  const parent = document.createElement('div');
  const el = app.mount(parent).$el;
  // 创建Overlay
  const overlay = new ol.Overlay({
    id: unid,
    element: el,
    offset: [0, -15],
    positioning: 'bottom-center',
    insertFirst: false,
    stopEvent: true
  });
  this.overlaysArr.push({
    app,
    id: unid,
    overlay
  });
  this.map.addOverlay(overlay); // 将Overlay添加到地图
  overlay.setPosition(coordinate); // 设置Overlay的位置
}
// 销毁实例
MeasureAttr.prototype.destroy = function () {
  ol.Observable.unByKey(this.listener);
  this.listener = null;
  const arr = this.overlaysArr;
  if (arr.length) {
    for (let i = 0; i < arr.length; i++) {
      const item = arr[i];
      item.app.unmount();
      this.map.removeOverlay(item.overlay);
    }
    this.overlaysArr = [];
  }
  MeasureAttr.ins = null;
  this.map.getViewport().style.cursor = 'inherit';
}
// MeasureAttr.prototype.
export default MeasureAttr